<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header">
			<view class="headerOne">
				<u-icon @click="icons" class="u-icon" name="arrow-left" color="#fff" size="18"></u-icon>
				<span>新增乘客</span>
				<span></span>
			</view>
			<view class="headerTwo">
				<span>
					<u-icon class="u-icon" name="man-add" color="#fff" size="36"></u-icon>
				</span>
				<p>138012345678</p>
				<view class="headerTwoA">
					<span>切换账号</span>
					<span><u-icon class="u-icon" name="arrow-right" color="#fff" size="14"></u-icon></span>
				</view>
			</view>
		</view>
		<!-- 中间 -->
		<view class="main">
			<view class="mainOne" @click="goDocumentScanning">
				<view class="mainOneA">
					<image src="/static/xiangji.png" mode=""></image>
					<p>扫描证件添加</p>
				</view>
			</view>
			<view class="mainTwo">

			</view>
			<view class="mainThird" @click="mainThird">
				<view class="mainThirdA">
					<span>乘客类型</span>
					<span>{{Typeofpassenger}}</span>
				</view>
				<span class="u-icon"><u-icon name="arrow-right" color="#ccc" size="14"></u-icon></span>
			</view>
			<view class="mainFour">
				<view class="mainFourA">
					<span>姓名</span>
					<span><input type="text" v-model="name"></span>
				</view>
			</view>
			<view class="mainFive" @click="mainFive">
				<view class="mainFiveA">
					<span>证件类型</span>
					<view class="mainFiveAs">
						<p>{{DocumentType}}</p>
					</view>
					
				</view>
				<span class="u-icon"><u-icon name="arrow-right" color="#ccc" size="14"></u-icon></span>
			</view>
			<view class="mainSix">
				<view class="mainSixA">
					<p>证件号码</p>
					<p><input type="text" v-model="number"></p>
				</view>
			</view>
			<view class="mainSeven">
				<view class="mainSevenA">
					<p>手机号码</p>
					<p><input type="text" v-model="iphone" ></p>
				</view>
			</view>
			<view class="mainEight">
				<view class="mainEightA">
					<p>为配合疫情防控工作 , 需提供每名乘客的<span>本人手机号</span> , 老人或无手机号的乘客 , 可填写亲友手机号</p>
				</view>

			</view>
		</view>
		<!-- 底部 -->
		<view class="foot">
			<view class="footOne">
				<p>本次购票服务由八维票务提供</p>
			</view>
			<view class="footTwo" @click="queding">
				确定
			</view>
		</view>
		<!-- 乘客类型 -->
		<view class="tk" v-if="kg">
			<u-popup :show="show" round='15' mode="bottom" @close="close" @open="mainThird">
				<view class="popup" @click="xp(item)" v-for="(item,index) in arr" :key="index">
					<p>{{item}}</p>
				</view>
				<p class="p" @click='qx'>取消</p>
			</u-popup>
		</view>
		<!-- 证件类型 -->
		<view class="tkTwo" v-else>
			<u-popup :show="show" round='15' mode="bottom" @close="closemainFive" @open="mainFive">
				<view class="popup" @click="xpone(item)" v-for="(item,index) in arrs" :key="index">
					<p>{{item}}</p>
				</view>
				<p class="pone" @click='qxone'>取消</p>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				arr:["成人票",'学生票','半价票'],
				arrs:['身份证','护照','海关出入证明'],
				Typeofpassenger:'成人票',
				kg:false,
				DocumentType:'身份证',
				name:'李四',
				number:'110102199009090000',
				iphone:'188123456789',
				indexid:0,
				orderlist:{}
			}
		},
		methods: {
			icons(){
				uni.navigateBack()
			},
			queding(){
				let arrlist={
					arr:this.Typeofpassenger,
					name:this.name,
					number:this.number,
					indexid:this.indexid,
					orderlist:this.orderlist,
					iphone:this.iphone
				}
				let str = JSON.stringify(arrlist)
				let encryption = encodeURIComponent(str)

				uni.navigateTo({
					url:'/pages/Order filling/Order filling?username='+encryption
				})
			},
			// 乘客类型
			mainThird() {
				this.show = true
				this.kg=true
			},
			close() {
				this.show = false
			},
			qx() {
				this.show = false
			},
			xp(item){
				this.Typeofpassenger=item
				this.show = false
			},
			//证件类型
			mainFive(){
				this.show = true
				this.kg=false
			},
			closemainFive(){
				this.show = false
			},
			qxone(){
				this.show = false
			},
			xpone(items){
				this.show = false
				this.DocumentType=items
				
			},
			goDocumentScanning(){
				uni.navigateTo({
					url:"/pages/DocumentScanning/DocumentScanning"
				})
			}
		},
		onLoad(option) {
			if(option.objs){
				let newarrs=decodeURIComponent(option.objs)
				let datalists=JSON.parse(newarrs)
				this.name=datalists.name
				this.number=datalists.number
				this.indexid=datalists.indexid
				this.orderlist=datalists
			}else if(option.card){
				let newarrs=decodeURIComponent(option.card)
				let datalists=JSON.parse(newarrs)
				this.name=datalists.name
				this.number=datalists.Idcard
			}

		}
	}
</script>


<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background: #f5f5f5;

		.header {
			width: 100%;
			height: 22vh;
			background: #01acbe;

			.headerOne {
				width: 100%;
				height: 60rpx;
				display: flex;
				padding-top: 80rpx;
				justify-content: space-between;
				color: #fff;

				span:nth-child(2) {
					margin-left: -40rpx;
				}
			}

			.headerTwo {
				width: 100%;
				height: 100rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				color: #fff;

				p {
					margin-left: -120rpx;
				}

				.headerTwoA {
					display: flex;
					align-items: center;
					margin-left: 100rpx;

					span:nth-child(1) {
						font-size: 26rpx;
					}
				}
			}
		}

		.main {
			width: 90%;
			height: 48vh;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background: #fff;

			.mainOne {
				width: 100%;
				height: 80rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;

				.mainOneA {
					width: 260rpx;
					justify-content: space-between;
					align-items: center;
					height: 100%;
					display: flex;
					color: #01acbe;

					image {
						width: 40rpx;
						height: 30rpx;
					}
				}
			}

			.mainTwo {
				width: 100%;
				height: 20rpx;
				background: #f5f5f5;
			}

			.mainThird {
				width: 100%;
				height: 80rpx;
				border-bottom: 2rpx solid #ccc;
				display: flex;
				align-items: center;

				.u-icon {
					margin-left: 380rpx;
				}

				.mainThirdA {
					width: 250rpx;
					height: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;

					span:nth-child(1) {
						font-size: 26rpx;
					}

					span:nth-child(2) {
						font-size: 28rpx;
						font-weight: 800;
					}
				}
			}

			.mainFour {
				width: 100%;
				height: 80rpx;
				border-bottom: 2rpx solid #ccc;

				.mainFourA {
					width: 250rpx;
					height: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;

					span:nth-child(1) {
						font-size: 26rpx;
					    margin-left: 18rpx;
						width: 120rpx;
					}

					span:nth-child(2) {
						font-size: 28rpx;
						font-weight: 800;
						width: 200rpx;
						margin-left: 80rpx;
					}
				}
			}

			.mainFive {
				width: 100%;
				height: 80rpx;
				border-bottom: 2rpx solid #ccc;
				display: flex;
				align-items: center;

				.u-icon {
					margin-left: 270rpx;
				}

				.mainFiveA {
					width: 360rpx;
					height: 80rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-left: -10rpx;
					.mainFiveAs{
						height: 80rpx;
						width: 200rpx;
						p{
							font-size: 28rpx;
							font-weight: 800;
							width: 100%;
							height: 80rpx;
							line-height: 80rpx;
						}
					}

					span:nth-child(1) {
						width: 40%;
						font-size: 26rpx;
						text-indent: .8em;
					}

					span:nth-child(2) {
						width:60%;
						font-size: 28rpx;
						font-weight: 800;
					}
				}
			}

			.mainSix {
				width: 100%;
				height: 80rpx;
				border-bottom: 2rpx solid #ccc;

				.mainSixA {
					width: 450rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;

					p:nth-child(1) {
						font-size: 26rpx;
					}

					p:nth-child(2) {
						font-weight: 800;
						font-size: 26rpx;
						width: 300rpx;
					}
				}
			}

			.mainSeven {
				width: 100%;
				height: 80rpx;
				border-bottom: 2rpx solid #ccc;

				.mainSevenA {
					width: 350rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					p:nth-child(1) {
						font-size: 26rpx;
					}

					p:nth-child(2) {
						font-weight: 800;
						font-size: 26rpx;
						width: 200rpx;
					}
				}
			}

			.mainEight {
				.mainEightA {
					width: 100%;
					height: 126rpx;

					p {
						font-size: 24rpx;
						color: #d3d3d3;
						padding: 28rpx;
					}

					span {
						color: #be5156;
					}
				}

			}
		}

		.foot {
			width: 100%;
			height: 28vh;

			.footOne {
				p {
					font-size: 26rpx;
					color: #ccc;
					text-align: center;
					padding-top: 60rpx;
				}
			}

			.footTwo {
				width: 90%;
				height: 80rpx;
				border-radius: 40rpx;
				margin: 0 auto;
				background-color: #01acbe;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				margin-top: 140rpx;
			}
		}

		.tk {
			.p {
				width: 100%;
				height: 140rpx;
				line-height: 140rpx;
				text-align: center;
			}
			.popup {

				p:nth-child(1) {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 2rpx solid #ccc;
				}

				p:nth-child(2) {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 2rpx solid #ccc;
				}

				p:nth-child(3) {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 2rpx solid #ccc;
				}
			}
		}
		.tkTwo{
			.pone {
				width: 100%;
				height: 140rpx;
				line-height: 140rpx;
				text-align: center;
			}
			.popup {
			
				p:nth-child(1) {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 2rpx solid #ccc;
				}
			
				p:nth-child(2) {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 2rpx solid #ccc;
				}
			
				p:nth-child(3) {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 2rpx solid #ccc;
				}
			}
		}

	}
</style>